const tile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    })
})

var map = new ol.Map({
    target: 'map',
    layers: [
        tile
    ],
    view: new ol.View({
        center: [12660812.343062978, 2611297.2546850457],
        zoom: 9.7,
        projection: 'EPSG:3857'
    })
});

const source = new ol.source.Vector({
    url: './data/data.gpx',
    format: new ol.format.GPX()
})

const vecLayer = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 6,
            fill: new ol.style.Fill({
                color: '#00f'
            })
        }),
        stroke: new ol.style.Stroke({
            color: '#ff0000',
            width: 4
        })
    })
})
map.addLayer(vecLayer)